<template>
  <div class="home">
    <div class="item" v-for="item of movies" :key="item._id" @click="toDetail(item._id)">
      <img :src="item.pic" alt="" />
      <p>{{ item.title}}</p>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import axios from "axios";
export default {
  name: "Home",
  setup() {
    const state = reactive({
      movies: [],
      toDetail(id) {
        this.$router.push(`/detail/${id}`)
      },
    });
    onMounted(() => {
      axios.get("http://122.112.161.135:4000/api/movie/top250").then((res) => {
        state.movies = res.data.res;
      });
    });
    const refState = toRefs(state);
    return {
      ...refState,
    };
  },
};
</script>
<style scoped>
.home {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 20px;
}
.item img {
  width: 200px;
  height: 200px;
}
.item p {
  width: 200px;
}
</style>
